<template>
	<div class="container">
	    <ul class="complete-list">
	    	<li>
	    		<h3 class="titInfo">到访信息</h3>
	    		<ul class="info-list">
	    			<li>
	    				<i class="fa fa-user-o faIcon"></i>
		    			<span class="name">李跃</span>
		    			<span class="sex"></span>
		    			<span class="label">保护带看</span>
	    			</li>
	    			<li>
	    				<i class="fa fa-mobile faIcon"></i>
		    			<span class="name">18910154774</span>
	    			</li>
	    			<li>
	    				<i class="fa fa-clock-o faIcon"></i>
		    			<span class="time">报备时间：2017-09-09  14:23</span>
	    			</li>
	    			<li>
	    				<i class="fa fa-file-text-o faIcon"></i>
		    			<p class="time">备注：000000000</p>
		    			
	    			</li>
	    		</ul>
	    	</li>
	    	<li>
	    		<h3 class="titInfo">经纪人信息</h3>
	    		<ul class="info-list">
	    			<li>
	    				<i class="fa fa-user-o faIcon"></i>
		    			<span class="name">王刚</span>
		    			<span class="sex active"></span>
	    			</li>
	    			<li>
	    				<i class="fa fa-mobile faIcon"></i>
		    			<span class="name">18910154774</span>
	    			</li>
	    			<li>
	    				<i class="fa fa-clock-o faIcon"></i>
		    			<span class="time">报备时间：2017-09-09  14:23</span>
	    			</li>
	    			<li>
	    				<i class="fa fa-file-text-o faIcon"></i>
		    			<p class="time">备注：000000000</p>
		    			
	    			</li>
	    		</ul>
	    	</li>
	    </ul>
	    <div class="footer">
	    	<div class="footer-content">
	    		<a href="javascript:;" class="operationBtn btnOne">防截客锁定中</a>
	    		<a href="javascript:;" class="operationBtn btnTwo">无效</a>
	    	</div>
	    </div>
	</div>
</template>
<script>
	export default {
		data () {
		    return {
		    }
		},
		methods :{
			
		}
	}
</script>
<style scoped>
	.complete-list{margin-bottom: 70px;}
	.complete-list>li{border-top: 1px solid #cdcdcd;border-bottom: 1px solid #cdcdcd;margin-top: 10px;padding: 12px 10px;background-color: #fff;}
	.titInfo{width: 100%;padding: 0 12px;height: 28px;line-height: 28px;font-size: 14px;color: #333;background-color: #f5f5f5;font-weight: normal;}

	.info-list>li{padding-left: 40px;position: relative;line-height: 22px;margin-top: 16px;width: 100%;}
	.info-list .faIcon{position: absolute;left: 10px;top: 4px;color: #333;left: 10px;}
	.info-list .fa-mobile{font-size: 20px;top: 1px;left: 12px;}
	.info-list .name{color: #333;margin-right: 6px;}
	.info-list .sex{width: 16px;height: 14px;overflow: hidden;background: url(../assets/images/sex.png) no-repeat;background-size: 32px auto;display: inline-block;position: relative;top: 2px;margin-right: 2px;background-position: 0 0;}
	.info-list .sex.active{background-position: -16px 0; }
	.info-list .label{height: 16px;background-color: #65baf5;color: #fff;font-size: 12px;padding: 0 6px;display: inline-block;line-height: 16px;margin-right: 2px;}
	.info-list .time{color: #999;}

	/*底部按钮*/
	.footer{position: fixed;left: 0;right: 0;bottom: 0;z-index: 2;}
	.footer-content{padding: 7px 0;border-top: 1px solid #cdcdcd;background-color: #fff;}
	.footer-content .operationBtn{float: left;width: 50%;height: 40px;line-height: 40px;text-align: center;}
	.footer-content .btnOne{color: #333;border-right: 1px solid #cdcdcd;}
	.footer-content .btnTwo{color: #9d9d9d;}

	.footer-content:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}
</style>